@{
    ViewData["Title"] = "编辑销售出库单";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewData["Title"]</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="~/libs/scripts/layui-v2.5.6/layui/css/layui.css" />
    <style>
        body { 
            padding: 20px; 
            background: #f8f9fa; 
            font-family: 'Microsoft YaHei', sans-serif;
        }
        .form-container {
            background: #fff;
            border-radius: 6px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            padding: 30px;
        }
        .form-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            margin-bottom: 25px;
            padding-bottom: 10px;
            border-bottom: 2px solid #f0f0f0;
        }
        .layui-form-label { 
            width: 110px; 
            text-align: right;
            font-weight: 500;
        }
        .layui-input-block { 
            margin-left: 140px; 
        }
        .layui-form-text .layui-input-block { 
            margin-left: 140px; 
        }
        .required { 
            color: #ff5722; 
            margin-right: 3px;
        }
        .layui-input, .layui-textarea, .layui-select {
            border-radius: 4px;
            border: 1px solid #e6e6e6;
            transition: border-color 0.3s;
        }
        .layui-input:focus, .layui-textarea:focus {
            border-color: #1890ff;
            box-shadow: 0 0 0 2px rgba(24,144,255,0.2);
        }
        .switch-container {
            display: flex;
            align-items: center;
            height: 38px;
            background: #f8f9fa;
            border-radius: 4px;
            padding: 0 12px;
            border: 1px solid #e6e6e6;
        }
        .btn-container {
            text-align: center;
            margin-top: 35px;
            padding-top: 25px;
            border-top: 1px solid #f0f0f0;
        }
        .layui-btn {
            border-radius: 4px;
            padding: 0 25px;
            height: 38px;
            line-height: 38px;
        }
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255,255,255,0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }
    </style>
</head>
<body>
    <div class="loading-overlay" id="loadingOverlay">
        <div style="text-align: center;">
            <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 30px; color: #1890ff;"></i>
            <div style="margin-top: 10px; color: #666;">加载中...</div>
        </div>
    </div>
    
    <div class="form-container">
        <div class="form-title">编辑销售出库单</div>
        <form class="layui-form" lay-filter="editForm" id="editForm">
            <input type="hidden" name="id" id="saleId">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="required">*</span>出库单编号
                </label>
                <div class="layui-input-block">
                    <div class="layui-row">
                        <div class="layui-col-md8">
                            <input type="text" name="saleCode" placeholder="请输入出库单编号" autocomplete="off" class="layui-input" lay-verify="required">
                        </div>
                        <div class="layui-col-md4" style="padding-left: 10px;">
                            <div class="switch-container">
                                <input type="checkbox" name="autoGenerate" title="自动生成" lay-skin="switch" lay-filter="autoGenerate">
                                <span style="margin-left: 10px; color: #666; font-size: 12px;">自动生成</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="required">*</span>出库单名称
                </label>
                <div class="layui-input-block">
                    <input type="text" name="saleName" placeholder="请输入出库单名称" autocomplete="off" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">销售订单编号</label>
                <div class="layui-input-block">
                    <input type="text" name="salesOrders" placeholder="请输入销售订单编号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="required">*</span>客户编码
                </label>
                <div class="layui-input-block">
                    <div class="layui-input-group">
                        <input type="text" name="customerCode" placeholder="请输入客户编码" autocomplete="off" class="layui-input" lay-verify="required" style="border-radius: 4px 0 0 4px;">
                        <div class="layui-input-suffix">
                            <button type="button" class="layui-btn layui-btn-primary" id="selectCustomer" style="border-radius: 0 4px 4px 0;">
                                <i class="layui-icon layui-icon-search"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">客户名称</label>
                <div class="layui-input-block">
                    <input type="text" name="customerName" placeholder="请输入客户名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="required">*</span>出库日期
                </label>
                <div class="layui-input-block">
                    <input type="text" name="saleDate" placeholder="请选择出库日期" autocomplete="off" class="layui-input" lay-verify="required" id="saleDate">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="required">*</span>单据状态
                </label>
                <div class="layui-input-block">
                    <select name="state" lay-verify="required">
                        <option value="">请选择状态</option>
                        <option value="0">草稿</option>
                        <option value="1">已完成</option>
                    </select>
                </div>
            </div>
            <div class="btn-container">
                <button class="layui-btn layui-btn-lg" lay-submit lay-filter="save">
                    <i class="layui-icon layui-icon-ok"></i> 保存
                </button>
                <button type="button" class="layui-btn layui-btn-primary layui-btn-lg" id="cancelBtn" style="margin-left: 20px;">
                    <i class="layui-icon layui-icon-close"></i> 取消
                </button>
            </div>
        </form>
    </div>

    <script src="~/libs/jquery/jquery.js"></script>
    <script src="~/libs/scripts/layui-v2.5.6/layui/layui.js"></script>
    <script>
        layui.use(['form', 'laydate', 'layer', 'util'], function () {
            var form = layui.form;
            var laydate = layui.laydate;
            var layer = layui.layer;
            var util = layui.util;

            // 获取URL参数
            function getUrlParam(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            }

            // 初始化日期选择器
            laydate.render({
                elem: '#saleDate',
                type: 'date',
                theme: '#1890ff'
            });

            // 加载数据
            var saleId = getUrlParam('id');
            if (saleId) {
                $('#saleId').val(saleId);
                loadSaleData(saleId);
            } else {
                $('#loadingOverlay').hide();
                layer.msg('缺少必要参数', { icon: 2 });
            }

            // 加载销售出库单数据
            function loadSaleData(id) {
                $.ajax({
                    url: '/Sale/FanSale',
                    type: 'GET',
                    data: { saleId: id },
                    success: function (data) {
                        if (data) {
                            // 填充表单数据
                            form.val('editForm', {
                                'saleCode': data.saleCode || '',
                                'saleName': data.saleName || '',
                                'salesOrders': data.salesOrders || '',
                                'customerCode': data.customerCode || '',
                                'customerName': data.customerName || '',
                                'saleDate': data.saleDate ? util.toDateString(new Date(data.saleDate), 'yyyy-MM-dd') : '',
                                'state': data.state || 0,
                                'remark': data.remark || ''
                            });
                            $('#loadingOverlay').hide();
                        } else {
                            $('#loadingOverlay').hide();
                            layer.msg('未找到相关数据', { icon: 2 });
                        }
                    },
                    error: function () {
                        $('#loadingOverlay').hide();
                        layer.msg('加载数据失败，请检查网络连接', { icon: 2 });
                    }
                });
            }

            // 自动生成编号开关
            form.on('switch(autoGenerate)', function (data) {
                if (data.elem.checked) {
                    // 生成自动编号
                    var now = new Date();
                    var year = now.getFullYear();
                    var month = String(now.getMonth() + 1).padStart(2, '0');
                    var day = String(now.getDate()).padStart(2, '0');
                    var time = String(now.getHours()).padStart(2, '0') + String(now.getMinutes()).padStart(2, '0');
                    var autoCode = 'PS' + year + month + day + time;
                    $('input[name="saleCode"]').val(autoCode).prop('readonly', true);
                } else {
                    $('input[name="saleCode"]').prop('readonly', false);
                }
            });

            // 选择客户按钮
            $('#selectCustomer').on('click', function () {
                layer.msg('客户选择功能开发中...', { icon: 1, time: 2000 });
                // 这里可以打开客户选择弹窗
            });

            // 表单验证规则
            form.verify({
                required: function(value, item) {
                    if(!value) {
                        return '此项为必填项';
                    }
                }
            });

            // 提交表单
            form.on('submit(save)', function (data) {
                var submitData = data.field;
                
                // 转换日期格式
                if (submitData.saleDate) {
                    submitData.saleDate = new Date(submitData.saleDate).toISOString();
                }
                
                // 转换状态为数字
                submitData.state = parseInt(submitData.state);
                
                // 添加ID
                submitData.id = parseInt($('#saleId').val());

                var loadingIndex = layer.load(2, { content: '正在保存...' });

                $.ajax({
                    url: '/Sale/UpdateSale',
                    type: 'POST',
                    data: submitData,
                    success: function (result) {
                        layer.close(loadingIndex);
                        if (result > 0) {
                            layer.msg('更新成功', { icon: 1, time: 1500 }, function () {
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                            });
                        } else {
                            layer.msg('更新失败，请重试', { icon: 2 });
                        }
                    },
                    error: function () {
                        layer.close(loadingIndex);
                        layer.msg('操作失败，请检查网络连接', { icon: 2 });
                    }
                });
                return false;
            });

            // 取消按钮
            $('#cancelBtn').on('click', function () {
                layer.confirm('确定要取消吗？未保存的修改将丢失', { icon: 3, title: '确认取消' }, function(index) {
                    layer.close(index);
                    var frameIndex = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(frameIndex);
                });
            });
        });
    </script>
</body>
</html> 